<template>
  <div class="app-container2">
    <div class="card-container">
      <el-tabs v-model="activeName" class="tabs" :before-leave="beforeLeave" stretch>
        <el-tab-pane label="基础信息" name="tab1"/>
        <el-tab-pane label="项目情况" name="tab2"/>
        <el-tab-pane label="调研人员" name="tab3"/>
        <el-tab-pane label="立项依据" name="tab4"/>
        <el-tab-pane label="经费预算" name="tab5"/>
        <el-tab-pane label="预期研究主要技术" name="tab6"/>
        <el-tab-pane label="电子文档上传" name="tab7"/>
      </el-tabs>
    </div>
    <Tab1 ref="tab1" v-if="activeName === 'tab1'" @active-next="activeNext" />
    <Tab2 ref="tab2" v-if="activeName === 'tab2'" @active-next="activeNext" />
    <Tab3 v-if="activeName === 'tab3'" />
    <Tab4 v-if="activeName === 'tab4'" />
    <Tab5 v-if="activeName === 'tab5'" />
    <Tab6 v-if="activeName === 'tab6'" />
    <Tab7 v-if="activeName === 'tab7'" />
  </div>
</template>

<script setup>
import {Tab1, Tab2, Tab3, Tab4, Tab5, Tab6, Tab7} from './components'


const activeName = ref('tab1')
const {proxy} = getCurrentInstance();

async function beforeLeave(activeName, oldActiveName) {
  if (oldActiveName === 'tab1') {
    return await formValidate1()
  } else if(oldActiveName === 'tab2') {
    return await formValidate2()
  }
}

function formValidate1() {
  return new Promise((resolve, reject) => {
    proxy.$refs.tab1.projectInfoRef.validate(valid => {
      if (!valid) {
        proxy.$modal.msgError('请先填写基础信息！')
        reject()
      } else {
        resolve()
      }
    })
  })
}
function formValidate2() {
  return new Promise((resolve, reject) => {
    proxy.$refs.tab2.projectManagementInfoRef.validate(valid => {
      if (!valid) {
        proxy.$modal.msgError('请先填写项目情况信息！')
        reject()
      } else {
        resolve()
      }
    })
  })
}

function activeNext(value) {
  activeName.value = value
}
</script>

<style scoped lang="scss">
.card-container {
  .tabs {
    width: 100%;
    display: flex;
    justify-content: space-between;

    &:deep(.el-tabs__header) {
      width: 100%;
    }
  }
}
</style>
